<!--
 * @Description: 故障信息
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-30 15:50:41
 * @LastEditTime: 2021-09-28 10:14:00
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="card-box">
    <div class="head">
      <p class="line-title">
        <i class="iconfont iconbang2" style="color: #fff; background: rgba(233, 212, 38, 0.75)"></i>
        <span>故障信息</span>
      </p>
    </div>
    <div class="table-box">
      <tao-table ref="tables" :data="tableData" :showPage="false" height="385px">
        <el-table-column label="详情" align="center" width="80" type="expand">
          <template slot-scope="scope">
            <info :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column label="告警网元" align="center" width="200" prop="neUserlabel" />
        <el-table-column label="设备告警码" align="center" width="120" sortable prop="code">
          <template slot-scope="scope">
            <span v-if="scope.row.deviceCode === -255">{{scope.row.extAttrs.devCode}}</span>
            <span v-else>{{scope.row.deviceCode}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="位置"
          align="center"
          width="150"
          show-overflow-tooltip
          prop="positionName"
        />
        <el-table-column label="等级" align="center" sortable width="120" prop="severity">
          <template slot-scope="scope">
            <span v-if="scope.row.severity === 'Critical'">
              <i class="i-yz"></i>
              严重
            </span>
            <span v-if="scope.row.severity === 'Major'">
              <i class="i-zy"></i>
              主要
            </span>
            <span v-if="scope.row.severity === 'Minor'">
              <i class="i-cy"></i>
              次要
            </span>
            <span v-if="scope.row.severity === 'Warning'">
              <i class="i-jg"></i>
              警告
            </span>
          </template>
        </el-table-column>
        <el-table-column label="原因" width="300" show-overflow-tooltip prop="title" />
        <!-- <el-table-column label="数据类型" align="center" width="170" sortable prop="alarmClass">
          <template slot-scope="scope">{{$t('alarms.' + scope.row.alarmClass)}}</template>
        </el-table-column>-->
        <el-table-column label="发生时间" align="center" width="170" sortable prop="occurredTime">
          <template slot-scope="scope">{{scope.row.occurredTime | filterTime}}</template>
        </el-table-column>
        <el-table-column label="清除时间" align="center" width="170" sortable prop="clearedTime">
          <template slot-scope="scope">{{scope.row.clearedTime | filterTime}}</template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" width="170" sortable prop="updateTime">
          <template slot-scope="scope">{{scope.row.updateTime | filterTime}}</template>
        </el-table-column>
        <el-table-column label="确认状态" align="center" width="120" sortable prop="alarmAckState">
          <template slot-scope="scope">
            <span v-if="scope.row.alarmAckState === 'ACKSTATE_UNACKNOWLEDGED'">反确认</span>
            <span v-if="scope.row.alarmAckState === 'ACKSTATE_ACKNOWLEDGED'">确认</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="130px">
          <template slot-scope="scope">
            <el-dropdown
              size="small"
              placement="bottom"
              trigger="click"
              v-power="scope.row.dgId === 100000 ? 0 : 2"
            >
              <span class="el-dropdown-link">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="action('clear', scope)">清除</el-dropdown-item>
                <el-dropdown-item @click.native="action('com', scope)">确认</el-dropdown-item>
                <el-dropdown-item @click.native="action('uncom', scope)">反确认</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </tao-table>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import info from '../../pages/alarms/info';
export default {
  components: { info },
  data () {
    return {
      tableData: []
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getAlarm();
    });
  },
  filters: {
    // 过滤时间
    filterTime (val) {
      if (val === undefined || val === null || val === '') {
        val = '';
      } else {
        val = val.substring(0, 19);
      }
      return val;
    }
  },
  methods: {
    getAlarm () {
      let _this = this;
      let params = {
        code: null,
        location: [],
        dgName: null,
        severity: ['Critical'],
        startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD') + ' 00:00:00',
        endTime: dayjs().format('YYYY-MM-DD') + ' 23:59:59',
        limit: 10,
        offset: 0
      };
      _this.$http.post({
        url: '/api/fm/sd/current',
        data: params
      }).then(res => {
        let { alarms } = res;
        _this.tableData = alarms;
      });
    },
    // 更多操作
    action (type, data) {
      let _this = this;
      switch (type) {
        case 'clear':
          _this.$confirm('此操作将清除该告警, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 清除
            _this.$http.put({
              url: '/api/fm/current/clear',
              data: [data.row.alarmKey]
            }).then(result => {
              setTimeout(() => {
                _this.getAlarm();
                _this.$message.success('清除成功！');
              }, 3000);
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消清除'
            });
          });
          break;
        case 'com':
          _this.$confirm('此操作将使该告警状态更改为确认，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 确认
            _this.$http.put({
              url: '/api/fm/current/confirm',
              data: [data.row.alarmKey]
            }).then(result => {
              setTimeout(() => {
                _this.getAlarm();
                _this.$message.success('确认成功！');
              }, 3000);
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消确认'
            });
          });
          break;
        default:
          _this.$confirm('此操作将使该告警状态更改为反确认，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 反确认
            _this.$http.put({
              url: '/api/fm/current/unconfirm',
              data: [data.row.alarmKey]
            }).then(result => {
              setTimeout(() => {
                _this.getAlarm();
                _this.$message.success('反确认成功！');
              }, 3000);
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消反确认'
            });
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  font-size: 13px;
}
.table-box {
  padding: 8px;
  height: calc(100% - 30px);
  ::v-deep thead {
    th {
      background: #f8f8f9;
    }
  }
}
.i-yz {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #de4040;
  position: relative;
  top: 1px;
}
.i-zy {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #de8f40;
  position: relative;
  top: 1px;
}
.i-cy {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e9d426;
  position: relative;
  top: 1px;
}
.i-jg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #86bcdb;
  position: relative;
  top: 1px;
}
</style>